<!--
 * @Date: 2024-09-26 14:11:17
 * @Author: LiSong
 * @LastEditors: LiSong
 * @LastEditTime: 2025-03-25 14:25:34
 * @Description: 
-->
<!-- 完整布局编辑 -->
<template>
  <container-wrapper :designer="designer"
    :widget="widget"
    :parent-widget="parentWidget"
    :parent-list="parentList"
    :index-of-parent-list="indexOfParentList">
    <div
      class="layout-container layout-full-container"
      :key="widget.id"
      :class="[selected ? 'selected' : '', customClass]"
      @click.stop="selectWidget(widget)"
    >
      <VfLayoutFull
        :="layoutAttrs"
        :style="{
          'padding': '8px',
          'min-height': `${minHeight}px`
        }"
      >
        <template #header_left>
          <DesignWidgetComp
            mark="header-left"
            :widget="widget"
            :designer="designer"
            :widgetList="widget.widgetList.headerLeftList"
          >
          </DesignWidgetComp>
        </template>
        <template #header_right>
          <DesignWidgetComp
            mark="header-right"
            :widget="widget"
            :designer="designer"
            :widgetList="widget.widgetList.headerRightList"
          >
          </DesignWidgetComp>
        </template>
        <template #aside>
          <DesignWidgetComp
            mark="header-aside"
            :widget="widget"
            :designer="designer"
            :widgetList="widget.widgetList.asideList"
          >
          </DesignWidgetComp>
        </template>
        <template #condition_content>
          <el-form :inline="true" label-width="auto" style="height: 100%;">
            <DesignWidgetComp
              mark="condition-content"
              :widget="widget"
              :designer="designer"
              :widgetList="widget.widgetList.conditionLeftList"
            >
            </DesignWidgetComp>
          </el-form>
        </template>
        <template #condition_toolbar>
          <DesignWidgetComp
            mark="condition-toolbar"
            :widget="widget"
            :designer="designer"
            :widgetList="widget.widgetList.conditionRightList"
          >
          </DesignWidgetComp>
        </template>
        <template #down_condition_left>
          <DesignWidgetComp
            mark="down-condition-left"
            :widget="widget"
            :designer="designer"
            :widgetList="widget.widgetList.downConditionLeftList"
          >
          </DesignWidgetComp>
        </template>
        <template #down_condition_right>
          <DesignWidgetComp
            mark="down-condition-right"
            :widget="widget"
            :designer="designer"
            :widgetList="widget.widgetList.downConditionRightList"
          >
          </DesignWidgetComp>
        </template>
        <template #main>
          <DesignWidgetComp
            mark="main-up"
            :widget="widget"
            :designer="designer"
            :widgetList="widget.widgetList.mainUpList"
          >
          </DesignWidgetComp>
        </template>
        <template #main_down>
          <DesignWidgetComp
            mark="main-down"
            :widget="widget"
            :designer="designer"
            :widgetList="widget.widgetList.mainDownList"
          >
          </DesignWidgetComp>
        </template>
      </VfLayoutFull>
    </div>
  </container-wrapper>
</template>

<script >
import i18n from "@/utils/i18n"
import containerMixin from "@/components/form-designer/form-widget/container-widget/containerMixin"
import ContainerWrapper from "@/components/form-designer/form-widget/container-widget/container-wrapper"
import FieldComponents from '@/components/form-designer/form-widget/field-widget/index'
import refMixinDesign from "@/components/form-designer/refMixinDesign"

import { VfLayoutFull } from '@/components/vf-layout'
import DesignWidgetComp from '../components/DesignWidgetComp.vue'

export default {
  name: "layout-full-widget",
  componentName: 'ContainerWidget',
  mixins: [i18n, containerMixin, refMixinDesign],
  inject: ['refList'],
  components: {
    VfLayoutFull,
    DesignWidgetComp,
    ContainerWrapper,
    ...FieldComponents,
  },
  props: {
    field: Object,
    widget: Object,
    designer: Object,
    parentList: Array,
    parentWidget: Object,
    indexOfParentList: Number,
    // 最小高度
    minHeight: { type: Number },
    // 布局主要区域样式(右侧主区域)
    mainStyle: { type: Object, default: null },
    //是否编辑状态
    designState: { type: Boolean, default: true },
  },
  data() {
    return {
    }
  },
  created() {
    this.initRefList()
  },
  //拖动改变面板大小
  computed: {
    selected() {
      return this.widget.id === this.designer.selectedId
    },
    customClass() {
      return this.widget.options.customClass || 'full-height'
    },
    layoutAttrs () {
      return this.initLayoutAttrs()
    }
  },
  methods: {
    /**
     * 初始化布局组件属性
     */
    initLayoutAttrs() {
      const { options } = this.widget
      let resAttrs = { ...options, designState: this.designState }
      delete resAttrs.onCreated
      delete resAttrs.onMounted
      return resAttrs
    },
    /**
     * 设置侧边栏显示或隐藏
     * 
     * @param state true 隐藏 / false显示
     */
    setAsideHidden(state) {
      this.layoutAttrs.enableAside = !state
    },
    /**
     * 控制上下布局
     * state: true 显示 /false
     */
    setUpDownEnabled(state) {
      this.layoutAttrs.upDownEnabled = state
    },
    /**
     * 控制条件区域(上部)
     * state: true 显示 /false
     */
     setMainConEnabled(state) {
      this.layoutAttrs.mainCondition.enabled = state
    },
    /**
     * 检查接收哪些组件拖放，如不接受某些组件拖放，则根据组件类型判断后返回false
     * @param evt
     * @returns {boolean}
     */
    checkContainerMove(evt) {
      return true
    },
    /**
     * 获取部件的撑满高度的样式类
     * 
     * @param {String} type 部件类型
     * @returns {String} 样式类
     */
    widgetFullHeightClass(type) {
      return ['zoning-unit-tree', 'data-table'].includes(type) ? 'widget-full-hight' : ''
    },
    /**
     * 获取部件的撑满宽度的样式类
     * 
     * @param {String} type 部件类型
     * @returns {String} 样式类
     */
    widgetFullWidthClass(type) {
      return ['button-group'].includes(type) ? 'widget-full-width' : ''
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/function.scss";

.layout-container.selected {
  outline: 2px solid $--color-primary !important;
}
.layout-container {
  outline: 2px solid #d9d9d9;
  height: 100% !important;
  margin: 2px;
}
.layout-full-container {
  :deep(.button-group-item) {
    width: 100%;
  }
  :deep(.button-item) {
    margin-right: 12px;
    &:last-child {
      margin-right: 0;
    }
  }
  :deep(.zoning-unit-tree-item) {
    height: calc(100% - 4px);
    padding: 2px;
  }
  :deep(.data-table-item) {
    height: calc(100% - 4px);
    padding: 2px;
    // &:nth-last-child(n+1) {
    //   height: calc(100% - 4px);
    //   padding: 2px;
    // }
  }
  :deep(.data-table-item:not(:only-child)) {
    height: 190px;
    padding: 4px 2px;
    margin-bottom: 3px;
    border-bottom: 1px solid #dadada;
  }
  :deep(.design-time-bottom-margin),
  :deep(.el-form-item) {
    margin-bottom: 0;
  }
}
</style>
